<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="500px"
			:close-on-click-modal="false">
			<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="100px">
				<el-row :gutter="35">
					<!-- <el-col :xs="24" class="mb20">
						<el-form-item label="付款方式">
							<el-select v-model="state.ruleForm.payment" placeholder="请选择付款方式" clearable size="default"
								style="width: 100%;">
								<el-option v-for="(item, key) in state.payData" :key="key" :label="item"
									:value="key"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" class="mb20">
						<el-form-item label="付款账号">
							<el-input v-model="state.ruleForm.username" placeholder="请输入付款账号" clearable></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :xs="24" class="mb20">
						<el-form-item label="每天积分上限">
							<div class="w100 shangxian" style="display:flex;" v-for="(item,index) in state.ruleForm.upper_limit" :key="index" v-if="state.ruleForm.upper_limit.length">
								<el-input :min="0" v-model="item.pay" type="number" :controls="false" placeholder="请输入每天上限"
									style="width: calc( 100% - 70px );" >
									<template #prepend>
										<el-select v-model="item.platform_id" filterable placeholder="请选择渠道" style="width: 130px">
											<el-option v-for="(plat,idx) in screenPlats" :disabled="plat.disabled" :key="'plat'+idx" :label="plat.cname" :value="plat.id" />
										</el-select>
									</template>
								</el-input>
								<div style="width: 70px;display:flex">
									<div class="addSum" style="background-color: dodgerblue;" @click="addUpper" v-if="index == state.ruleForm.upper_limit.length - 1">+</div>
									<div class="addSum" style="background-color: red;line-height: 26px;" @click="sumUpper(index)">-</div>
								</div>
							</div>
							<div style="width: 70px;display:flex" v-else>
								<div class="addSum" style="background-color: dodgerblue;" @click="addUpper">+</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="systemUserDialog">
import { reactive, ref,computed } from 'vue';
import { ElMessage } from 'element-plus';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
import { memberApi } from '/@/api/member/index';
import { commApi } from '/@/api/comm/index';
// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
	platforms:[],
	ruleForm: {
		payment: '',
		username: '',
		upper_limit: [],
	},
	payData: {
		// 1: '微信',
		// 2: '支付宝',
		// 3: '银行卡',
		4: 'Paypal'
	},
	dialog: {
		isShowDialog: false,
		title: '修改配置',
		submitTxt: '修改',
	},
	user_id: ''
});
const addUpper = ()=>{
	state.ruleForm.upper_limit.push({
		pay:0,
		platform_id:null,
	});
}
const sumUpper = (index)=>{
	state.ruleForm.upper_limit.splice(index,1);
}
// 打开弹窗
const openDialog = (row) => {
	state.ruleForm = {
		payment: '',
		username: '',
		upper_limit: [],
	}
	state.user_id = row.id;
	state.dialog.isShowDialog = true;
	memberApi().conf(undefined, state.user_id).then(res => {
		if (res.data) {
			if(!res.data.upper_limit)res.data.upper_limit = []
			state.ruleForm = res.data;
		}
	})
	getPlats();
};

//筛选渠道
const screenPlats = computed(() => {
	return state.platforms.map(item => {
		if (state.ruleForm.upper_limit.some(existingItem => existingItem.platform_id == item.id)) {
			return { ...item, disabled: true };
		} else {
			return { ...item, disabled: false };
		}
	});
});

const getPlats = () => {
	commApi().getPlats().then(res=>{
		state.platforms = res.data.paltform
	})
}
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	for(let i=0;i<state.ruleForm.upper_limit.length;i++){
		if(!state.ruleForm.upper_limit[i].platform_id){
			ElMessage.error('每日上限必须设置渠道');
			return
		}
	}
	memberApi().conf(state.ruleForm, state.user_id).then(res => {
		ElMessage.success('修改配置成功');
		closeDialog(); // 关闭弹窗
		emit('refresh');
	})
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
.addSum{
	width: 30px;
	height: 30px;
	color: #fff;
	border-radius: 50%;
	line-height: 30px;
	text-align: center;
	font-size: 20px;
	margin-left:5px;
	cursor: pointer;
}
.shangxian{
	margin-bottom: 10px;
	&:last-child{
		margin-bottom: 0;
	}
}
</style>

